<template>
    <div class="x3">
        <el-container style="height: 100%; margin: 0;padding: 0;">
            <el-header class="tou1">
                <div style="display: flex;">
                    <i :class="this.$router.options.routes[3].children[3].meta.icon" style="align-self: center;"></i>
                    <p>{{ this.$router.options.routes[3].children[3].meta.name }}</p>
                </div>
            </el-header>
            <el-main class="shen1">
                <div style="display: flex;">
                    <div>
                        <template>
                            <el-button type="button" style="width: 100px ;height: 35px;" @click='add'>点击打开 </el-button>
                        </template>
                    </div>
                    <div style="display: flex; justify-content: flex-end;margin-left:20px">
                        <el-input v-model="params.name" placeholder="请输入内容"></el-input>
                        <el-button type="primary" icon="el-icon-search" @click="sous">搜索</el-button>
                    </div>
                </div>
                <div>
                    <template>
                        <el-table :data="guanli" style="width: 100% ,">
                            <el-table-column prop="name" label="班级名" width="180">
                            </el-table-column>
                            <el-table-column prop="departmentName" label="系名" width="180">
                            </el-table-column>
                            <el-table-column prop="majorName" label="专业名">
                            </el-table-column>


                            <el-table-column prop="" label="操作">
                                <template slot-scope="scope">
                                    <el-button  type="danger" size="small" @clcik="shan(scope.row.id)">删除</el-button>
                                    <el-button type="success" size="small" @click='edit(scope.row.id)'>编辑</el-button>
                                </template>
                            </el-table-column>

                        </el-table>
                    </template>
                </div>
            </el-main>
            <el-footer class="jiao1">
                <div class="block">
                    <span class="demonstration"></span>
                    <el-pagination :current-page.sync="page" @current-change="currentChange" layout="prev, pager, next"
                        :total="yeshu">
                    </el-pagination>
                </div>
            </el-footer>
        </el-container>

        <el-dialog title="专业添加" :visible.sync="dialogFormVisible">
            <el-form :model="form" label-width="100px" ref="form">
                <el-form-item label="专业名" prop="majorName" :rules="[{ required: true, message: '请输入年份', trigger: 'blur' }]">
                    <el-input v-model="form.majorName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="系名" prop="departmentName"
                    :rules="[{ required: true, message: '请输入专业', trigger: 'blur' }]">
                    <el-input v-model="form.departmentName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="班级" prop="name" :rules="[{ required: true, message: '请输入班级', trigger: 'blur' }]">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="banjigljia1">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>
<script>
import { banjigl, banjigl3, banjigljia, banjiglxg, banjiglxq ,shan4} from '@/api/index'
export default {
    data() {
        return {
            input: '',
            guanli: [

            ],
            params: {
                name: '',
                departmentName: '',
                majorName: ''
            },
            page: 1,
            yeshu: 1,
            form: {
                departmentName: '',
                majorName: '',
                id: -1,
                name: '',


            },
            dialogFormVisible: false,

        }
    },

    methods: {
        shan(id) {

shan4(id).then(res => {

    if (res.code === 0) {

        // 假设返回 code 为 0 表示删除成功

        this.$message({

            message: "删除成功",

            type: "success"

        });

        // 刷新数据列表

        this.banguanli();

    } else {

        // 处理删除失败的情况

        console.error("删除失败", res);

    }

}).catch(error => {

    console.error("请求失败", error);

});

},
        edit(id) {
            console.log(id);
            banjiglxq(id).then(res => {
                console.log(res);
                if (res.code === 0) {
                    this.form = res.data;
                    this.dialogFormVisible = true
                }

            })
        },
        add() {
            this.banguanli()
            this.dialogFormVisible = true
        },
        banjigljia1() {

            this.$refs['form'].validate(f => {

                if (f) { // 确保验证通过
                    if (this.form.id === -1) {
                        banjigljia(this.form).then(res => {

                            console.log(res);

                            if (res.code === 0) {

                                this.$message({

                                    message: "添加成功",

                                    type: "success"

                                });

                                this.banguanli();

                                this.dialogFormVisible = false;

                            }

                        })
                    } else {
                        banjiglxg(this.form).then(res => {

                            console.log(res);

                            if (res.code === 0) {

                                this.$message({

                                    message: "修改成功",

                                    type: "success"

                                });

                                this.banguanli();

                                this.dialogFormVisible = false;

                            }

                        })
                    }

                }
            });

        },
        banguanli(page = 1) { // 默认页码为1
            banjigl(this.params, page).then(res => { // 传递页码参数
                console.log(res);
                if (res.code === 0) {
                    console.log(111);
                    this.guanli = res.data;
                }
            });
        },
        sous() {
            this.page = 1,
                this.banji(),
                this.banguanli(); // 默认调用第一页数据
        },
        banji() {
            banjigl3(this.params).then(res => {
                console.log(res, 'ye');
                if (res.code === 0) {
                    this.yeshu = res.data * 10;
                    console.log(res.data * 10);
                    // 初始化时加载第一页数据
                    this.banguanli(1);
                }
            });
        },
        currentChange(v) {
            console.log(v);
            this.page = v;
            this.banguanli(v); // 传递当前页码
        },
    },
    mounted() {
        this.sous(); // 加载第一页数据
        this.banji(); // 获取总页数
        // 不需要单独调用 this.currentChange()，因为已经在 sous 和 banji 中处理
    }
}
</script>
<style lang="scss">
html,
body,
.x3 {

    height: 100%;

    margin: 0;

    padding: 0;

}

.el-header,
.el-main,
.el-footer {
    width: 100%;
    margin: 0;

    padding: 0; // 如果你想完全移除内边距，可以这样设置

    // 如果只是想要调整内边距，可以指定具体的值，例如：

    // padding: 10px;

}

.block {
    justify-items: center;
}
</style>